<template>
    <div class="login">
        <div class="bg"></div>
        <transition name="el-fade-in-linear">
            <div class="spin-container" v-if="loading">
              <div class="spin1">
                <div class="spin2">
                </div>
                  <div class="spin3">
                </div>
              </div>
            </div>
        </transition>
        <!-- 登录 -->
        <transition name="el-zoom-in-center">
        <div class="center">
            <el-form ref="form" :model="form" class="container" :rules="rules">
                <el-form-item>
                  <div class="avatar">
                    <span class="disline bor_left"></span>
                    <h3 class="disline title_text">登录</h3>
                    <span class="disline bor_right"></span>
                  </div>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="form.username" maxlength="11" placeholder="请输入登录名..." prefix-icon="myicon myicon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码..." show-password prefix-icon="myicon myicon-key"></el-input>
                </el-form-item>
                <!-- <el-form-item prop="validCode">
                  <el-col :span="11">
                      <el-input v-model="form.validCode" placeholder="请输入验证码..."></el-input>
                  </el-col> 
                  <el-col :span="6" style="margin:0 5px;">
                      <div class="verify-box" style="margin:0 5px -10px 5px;width: 100%;height: 30px;display:inline-block;" >
                          <Sidentify :identifyCode="identifyCode"></Sidentify>
                      </div>
                  </el-col> 
                  <el-button type="primary" @click="refreshCode">看不清</el-button>
                </el-form-item> -->
                <el-form-item>
                    <el-button class="login-btn" @click="loginSubmit('form')">登录</el-button>
                </el-form-item>
                <h5 style="font-size:14px;color: #555;text-align:center;">
                  <!-- <span>Copyright 2018 (c). All Rights Reserved.</span> -->
                </h5>
            </el-form>
            <!-- <p class="tpis">
              系统仅支持Edge、Google Chrome、Mozilla Firefox以及其它主流的浏览器，如您的浏览器无法使用本系统，请更换其它浏览器！
            </p> -->
        </div>
        </transition>
        <!-- 登录 -->
    </div>
</template>
<script>
import DataUtil from "../common/dataUtil";
import md5 from 'js-md5';
import Sidentify from "../components/identify.vue";
import { login } from "@/api/index.js";

  var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!DataUtil.isMobile(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
export default {
  data() {
    return {
      loading : true,
      isShow : false,
      isSubmit : false,
      identifyCodes: "1234567890",
      identifyCode: "",
      form: {
        username: "",
        password: "",
        validCode : '',
      },
      rules: {
        username: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // validCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
    };
  },
  methods: {
    /////////刷新验证码start////////////
    refreshCode(){
       this.identifyCode = '';
       this.makeCode(this.identifyCodes,4);

    },
    makeCode(o,l){
      for(let i=0;i<l;i++){
         this.identifyCode += this.identifyCodes[
            this.randomNum(0,this.identifyCodes.length)
         ];
      }
    },
    randomNum(min,max){
       return Math.floor(Math.random()*(max-min + min));
    },
     /////////刷新验证码end////////////
      /////////登录start////////////
    loginSubmit(formName) {
      this.$refs[formName].validate(valide => {
        // if(this.form.validCode == this.identifyCode){
            //只有校验通过之后才执行函数
            if (valide) {
              let _Data = {
                "userName" : this.form.username,
                "passwd" : md5(this.form.password)
              }
              login(_Data).then(
                response => {
                  //如果登录成功要跳转到首页，将token保存到本地 localStorage
                  //如果有数据并且code=1时 执行dataUtil.js  封装的函数，将用户的数据保存在localStorage里
                  if ('0' == response.code) {
                    DataUtil.sid(response.data.sessionId);
                    DataUtil.userInfo(this.form.username);
                    //登录成功  跳转到home页面
                    this.$router.push("/home");
                    this.$message({
                        message: '登录成功！',
                        type: 'success'
                    });
                  } else {
                    this.refreshCode();
                    this.$message.error(response.message);
                    this.form.username = '';
                    this.form.password = '';
                    this.form.validCode = '';
                  }
                }, response => {
                  this.refreshCode();
                  this.logining = false;
                }
              );
            } else {
                for(let key in this.form){
                  if(!this.form.username){
                      this.$message.error("登录名,不能为空！");
                  }else if(!this.form.password){
                      this.$message.error("密码,不能为空！");
                  }
                  // else if(!this.form.validCode ){
                  //     this.$message.error("验证码,不能为空！");
                  // }
                }
            }
        // }else{
        //     this.$message.error("验证码输入有误！");
        //     this.refreshCode();
        // }
      });
    },
    /////////登录end////////////
    openFullScreen() {
        setTimeout(() => {
          this.loading = false;
        }, 1000);
    }
  },
  created() {},
  mounted: function() {
    this.refreshCode();
    this.openFullScreen();
  },
   components: {
    Sidentify
  }
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2d3a4b;
    // background: url(../assets/meinv11.jpg) no-repeat;
    // background-position: 50% 50%;
    // background-size: cover;
    // transition: all 10s linear;；/
    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1; /*动画播放的次数*/
    -webkit-animation-duration: 13s; /*动画所花费的时间*/
  }
  @keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1.2); /*开始为原始大小*/
    }
    100% {
      transform: scale(1); /*放大1.1倍*/
    }
  }
  .left15 {
    width: 400px;
    height: 400px;
    background-color: rgba(247, 248, 248, 0.719);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -moz-transform: rotate(5deg); /* Firefox */
    -webkit-transform: rotate(5deg); /* Safari 和 Chrome */
    -o-transform: rotate(5deg); /* Opera */
    transform-origin: center center;
  }
  .right15 {
    width: 400px;
    height: 400px;
    background-color: rgba(247, 248, 248, 0.719);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -moz-transform: rotate(-5deg); /* Firefox */
    -webkit-transform: rotate(-5deg); /* Safari 和 Chrome */
    -o-transform: rotate(-5deg); /* Opera */
    transform-origin: center center;
  }
  .center {
      width: 400px;
      height: 480px;
      position: absolute;
      left: 50%;
      top: 8%;
      margin-top: 0;
      margin-left: -200px;
      border-radius: 5px;
    p{
        width: 380px;
        text-align: center;
        font-size: 13px;
        margin-top: 8px;
        color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        filter: alpha(opacity=8);
        -moz-opacity: .8;
        opacity: .8;
    }
    .container {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 40px 60px;
      .avatar {
        width: 95%;
        height: 60px;
        text-align: center;
        .disline {
          display: inline-block;
        }
        .bor_left {
          background-color: transparent;
          vertical-align: middle;
          margin-bottom: 10px;
          padding-left: 10px;
        }
        .bor_left img{
        width: 40px;
        margin: 0 5px -15px 15px;
        background-color: #e4e4e4;
        border-radius: 50%;
        box-shadow: 1px 2px 6px rgba(0,0,0,.03);
      }
      .bor_left img:hover{
          transform: rotateY(-360deg);
          transition-property: all;
          transition-duration: 0.5s;
          transition-timing-function: ease-in-out;
          transition-delay: initial;
      }
        .bor_right {
          height: 2.3px;
          vertical-align: middle;
        }
        .title_text {
          font-size: 22px;
          font-weight: 600;
          color: #fff;
        }
      }

      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        // background-color: rgb(102, 191, 218);
        // border-color: rgb(102, 191, 218);
      }
      .el-checkbox__inner:hover {
        border-color: rgb(102, 191, 218);
      }
      .login-btn {
        width: 100%;
        background-color: #1890ff;
        color: #fff;
        border: 0;
        padding: 10px 0;
      }
      .login-btn:hover{
        color: #fff;
        background-color: #46a6ff;
        border-color: #46a6ff;
      }
    }
  }
}
    
</style>

